<template>
    <div class="seeAgents-view">
        <el-dialog title="经纪人详情" @open="openView" :visible.sync="dialogFormVisible" width="10%" :show-close="showimg" :close-on-click-modal="showimg" :close-on-press-escape="showimg" >
            <div class="dialog-close-img" @click="closeBox">
                <img src="../../../assets/img/cancel@2x.png"/>
            </div>
            <div>
                <el-tabs type="border-card">
                    <el-tab-pane>
                        <span slot="label"><i class="el-icon-date"></i> 个人资料</span>
                        <div class="seeAgents-user-msg">
                            <div class="seeAgents-user-msg-content1">
                                <div class="seeAgents-user-msg-list">
                                    <div>头像：</div>
                                    <div class="user-img">
                                        <img :src="userInfo.avatarUrl"/>
                                    </div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>经纪人姓名：</div>
                                    <div>{{userInfo.name}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>手机号码：</div>
                                    <div>{{userInfo.tempPhone}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>特色标签：</div>
                                    <div><span v-for="item in userInfo.userTags" >{{item}}</span></div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>注册时间：</div>
                                    <div>{{userInfo.regiterTime}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>所属分销平台：</div>
                                    <div>{{userInfo.distributorName}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>所属机构：</div>
                                    <div>{{userInfo.institutionName}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>主营区域：</div>
                                    <div>{{userInfo.majorRegion}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>个性签名：</div>
                                    <div>{{userInfo.signature}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>最近登录时间：</div>
                                    <div>{{userInfo.createTime}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>所属门店：</div>
                                    <div>{{userInfo.storeName}}</div>
                                </div>
                            </div>
                            <div class="seeAgents-user-msg-content2">
                                <div class="seeAgents-user-msg-list">
                                    <div>开通楼盘数量：</div>
                                    <div>3</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>消费金额：</div>
                                    <div>{{userInfo.givePrice}}元</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>客户数量：</div>
                                    <div>{{userInfo.storeName}}</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>帐户余额：</div>
                                    <div>{{userInfo.storeName}}元</div>
                                </div>
                                <div class="seeAgents-user-msg-list">
                                    <div>优惠券数量：</div>
                                    <div>{{userInfo.couponCount}}张</div>
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> 楼盘列表</span>
                        <div>
                            <el-table
                                    :data="contentlist"
                                    style="width: 100%"
                                   >
                                <el-table-column v-if="headlist.checkout==true"
                                                 type="selection"
                                                 width="50">
                                </el-table-column>
                                <el-table-column
                                        v-for="item in headlist.list"
                                        :key=" item.id"
                                        :prop="item.prop"
                                        :label="item.label"
                                        :width="item.width">
                                </el-table-column>
                            </el-table>
                            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> 客户列表</span>
                        <div>
                            <el-table
                                    :data="contentlist"
                                    style="width: 100%"
                            >
                                <el-table-column v-if="headlist.checkout==true"
                                                 type="selection"
                                                 width="50">
                                </el-table-column>
                                <el-table-column
                                        v-for="item in headlist.list"
                                        :key=" item.id"
                                        :prop="item.prop"
                                        :label="item.label"
                                        :width="item.width">
                                </el-table-column>
                            </el-table>
                            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> 报备客户</span>
                        <div>
                            <el-table
                                    :data="contentlist"
                                    style="width: 100%"
                            >
                                <el-table-column v-if="headlist.checkout==true"
                                                 type="selection"
                                                 width="50">
                                </el-table-column>
                                <el-table-column
                                        v-for="item in headlist.list"
                                        :key=" item.id"
                                        :prop="item.prop"
                                        :label="item.label"
                                        :width="item.width">
                                </el-table-column>
                            </el-table>
                            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> 消费记录</span>
                        <div>
                            <el-table
                                    :data="contentlist"
                                    style="width: 100%"
                            >
                                <el-table-column v-if="headlist.checkout==true"
                                                 type="selection"
                                                 width="50">
                                </el-table-column>
                                <el-table-column
                                        v-for="item in headlist.list"
                                        :key=" item.id"
                                        :prop="item.prop"
                                        :label="item.label"
                                        :width="item.width">
                                </el-table-column>
                            </el-table>
                            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane>
                        <span slot="label"> 登录日志</span>
                        <div>
                            <el-table
                                    :data="contentlist"
                                    style="width: 100%"
                            >
                                <el-table-column v-if="headlist.checkout==true"
                                                 type="selection"
                                                 width="50">
                                </el-table-column>
                                <el-table-column
                                        v-for="item in headlist.list"
                                        :key=" item.id"
                                        :prop="item.prop"
                                        :label="item.label"
                                        :width="item.width">
                                </el-table-column>
                            </el-table>
                            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
                        </div>
                    </el-tab-pane>

                </el-tabs>

            </div>
            <div>

            </div>
        </el-dialog>
    </div>
</template>

<script>
    import UserList from '../user/UserList';
    import Pagination from '../Pagination';
    export default {
        name: "seeAgents",
        data(){
            return{
                showimg:false,
                totalpag:0,
                current:1,
                selectLists:"",
                userInfo:{},
                headlist:{
                    checkout:false,
                    operation:{
                        type:true,
                        fromurl:"agentManage",
                    },
                    list:[
                        {
                            prop:"linkerId",
                            label:"序号",
                            width:"100",
                        },
                        {
                            prop:"houseName",
                            label:"楼盘名称",
                            width:"160",
                        },{
                            prop:"houseArea",
                            label:"所属区域",
                            width:"200",
                        }
                        ,{
                            prop:"registerTime",
                            label:"房源类型",
                            width:"130",
                        }
                        ,{
                            prop:"saleSts",
                            label:"销售状态",
                            width:"120",
                        }
                        ,{
                            prop:"openSts",
                            label:"开通状态",
                            width:"120",
                        }
                        ,{
                            prop:"openTime",
                            label:"开通时间",
                            width:"180",
                        }
                        ,{
                            prop:"outTime",
                            label:"过期时间",
                            width:"180",
                        }
                        ,{
                            prop:"transCount",
                            label:"转发量",
                            width:"100",
                        }
                        ,{
                            prop:"clickCount",
                            label:"点击量",
                            width:"100",
                        }
                    ]},
                contentlist:[],
            }

        },
        components: {
            UserList,
            Pagination,
        },

        props:{
            seeDetails:{
                type:Object,
            },
            dialogFormVisible: {
                type: Boolean
            },
        },
        mounted(){
            },
        methods: {
            openView(){
                this.getuserdata();
                this.getlist();
            },
            //获取经纪人资料
            getuserdata(){
                let _this=this;
                let params={
                    agentId:this.seeDetails.agentId,
                }
                _this.Api.setting.agentManageUpdate(params).then((data)=>{
                    console.log(data,"<<<<<<<<<<<<<<<<<<<<<<<<<<<")
                    _this.userInfo=data.data;
                })
            },
            currentpage(currentpage){
                console.log("当前页，",currentpage)
                this.current=currentpage
                this.getlist()
            },
            //关闭
            closeBox(){
                this.$emit("close");
            },
            //获取列表
            getlist(){
                let _this=this;
                let params={
                    agentId:1,
                    current:_this.current,
                    size:10,
                }
                _this.Api.setting.houseList(params).then((data)=>{
                    console.log(data,"<<<<<<<<<<<<<<<<<<<<<<<<<<<")
                    _this.totalpag=data.data.total;
                    _this.contentlist=data.data.records;
                })
            }
        },
    }
</script>
<style>
    .seeAgents-view .el-dialog--small {
        width:942px;
    }
    .seeAgents-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .seeAgents-view .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;
    }
    .seeAgents-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.dialog-close-img{
    width: 18px;
    height: 18px;
    position: absolute;
    top: 16px;
    right: 12px;
    cursor: pointer;
    img{
        width: 18px;
        height: 18px;
    }
}
.seeAgents-view{
    .seeAgents-user-msg {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        display: flex;
        .seeAgents-user-msg-content1 {
            width: 60%;
        }
        .seeAgents-user-msg-content2 {
            width: 40%;
        }
            .seeAgents-user-msg-list {
                display: flex;
                height: 24px;
                margin-top: 24px;
                div {
                    align-self: center;
                    span{
                        margin-right: 8px;
                    }
                }
                .user-img {
                    width: 24px;
                    height: 24px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 24px;
                        height: 24px;
                    }
                }
            }
    }
}

</style>